<!-- eslint-disable vue/require-valid-default-prop -->
<script setup>
import { oss } from '@/utils/config'
import { ref, toRefs, nextTick } from 'vue'
import { usePraise } from '@/hooks/usePraise.js'
import { useBrowse } from '@/hooks/useBrowse.js'
const props = defineProps({
  list: {
    type: Object,
    default: {}
  }
})
const { list } = toRefs(props)
const emit = defineEmits(['onClick', 'onBrowseLog'])
// 点赞
const onPraise = (e) => {
  if (list.value.isPraise === 0) {
    list.value.isPraise = 1
    list.value.praiseSum += 1
  } else {
    list.value.isPraise = 0
    list.value.praiseSum -= 1
  }
  usePraise({
    targetId: e.courseId,
    targetType: 1
  })
}

// 下一步
const onGo = (e) => {
  if (e.courseType === 1) {
    useBrowse({ targetId: list.value.courseId, targetType: 1 })
    emit('onClick', e)
  }
}

const media = ref(null)
nextTick(() => {
  media.value.addEventListener('play', function () {
    // 播放开始执行的函数
    console.log('开始播放')
    useBrowse({ targetId: list.value.courseId, targetType: 1 })
  })
})
</script>
<template>
  <div class="v-science" @click.stop="onGo(list)">
    <div class="v-science-title">
      {{ list.courseTitle }}
    </div>
    <div class="v-science-main" v-if="list.courseType === 1">
      <p class="v-science-main-left">
        {{ list.courseIntro }}
      </p>
      <p class="v-science-main-right">
        <img :src="list.courseCoverImage" alt="" />
      </p>
    </div>
    <div class="v-science-video" v-if="list.courseType === 2">
      <video
        controls
        ref="media"
        :src="oss + '/nutrition/WeChat_20220923152454.mp4'"
      ></video>
    </div>
    <div class="van-hairline--top"></div>
    <div class="v-science-bottom">
      <span
        ><van-icon :name="oss + '/nutrition/web/%E6%9F%A5%E7%9C%8B.png'" />{{
          list.browseSum
        }}</span
      >
      <span v-if="list.courseType === 1"
        ><van-icon
          :name="oss + '/nutrition/web/%E8%AF%84%E8%AE%BA.png'"
        />评论</span
      >
      <span
        :class="{ 'v-praise-active': list.isPraise === 1 }"
        @click.stop="onPraise(list)"
        ><van-icon
          :name="
            oss +
            (list.isPraise === 1
              ? '/nutrition/web/%E7%82%B9%E8%B5%9E-active.png'
              : '/nutrition/web/%E7%82%B9%E8%B5%9E.png')
          "
        />{{ list.praiseSum }}</span
      >
    </div>
  </div>
</template>
<style lang="scss" scoped>
.v-science {
  padding: 16px 12px 0;
  margin-bottom: 5px;
  background: #ffffff;
  .v-science-title {
    font-size: 16px;
    color: #212532;
    line-height: 22px;
  }
  .v-science-main {
    margin: 12px 0 15px;
    display: flex;
    justify-content: space-between;
    .v-science-main-left {
      width: 245px;
      font-size: 14px;
      color: #212532;
      line-height: 22px;
      display: -webkit-box;
      -webkit-box-orient: vertical; /* 表示盒子对象的子元素的排列方式 */
      -webkit-line-clamp: 3; /* 限制文本的行数，表示文本第多少行省略 */
      text-overflow: ellipsis; /*  打点展示 */
      overflow: hidden;
    }
    .v-science-main-right {
      width: 92px;
      height: 64px;
      border-radius: 5px;
      border: 1px solid #ffffff;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .v-science-video {
    height: 194px;
    margin: 15px 0;
    overflow: hidden;
    border-radius: 10px;
    video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      &:focus {
        outline: none;
      }
    }
  }
  .v-science-bottom {
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #555555;
      .van-icon {
        font-size: 15px;
        margin-right: 6px;
      }
    }
    .v-praise-active {
      color: #5b97fa;
    }
  }
}
</style>
